.free-tab {
  position: relative;
  width: 110px;
  background-color: #f8f8f8;
  border-right: 1px solid #dcdee2;
  cursor: pointer;
  &:hover {
    .free-tab-control {
      visibility: visible;
    }
  }
  .free-tab-control {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    display: flex;
    visibility: hidden;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    .free-tab-control-btn {
      flex: 1;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      &:hover {
        .free-tab-control-btn-tip {
          visibility: visible;
        }
      }
      .free-tab-control-btn-tip {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 30;
        visibility: hidden;
        width: 100%;
        height: 5px;
        background-color: #2db7f5;
      }
    }
    .free-tab-control-dividing {
      width: 1px;
      background-color: #DDF3F5;
    }
  }
  .free-tab-show {
    position: relative;
    height: 100%;
    .free-tab-show-label {
      padding: 10px 0;
      text-align: center;
    }
    .free-tab-show-tip-wrap {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 10;
      display: flex;
      width: 100%;
      height: 5px;
      .free-tab-show-tip {
        flex: 1;
      }
      .free-tab-show-tip-dividing {
        width: 1px;
      }
      .free-tab-show-tip-active {
        background-color: #2db7f5;
      }
    }
  }
}